<template>
	<view>
		<view class="uploadBox">
			<template>
				<view class="imgBox" v-for="(src,i) in imgList" :key="i">
					<image :style="{width:imgSize+'rpx',height:imgSize+'rpx'}"
						@click="$tools.previewImage(imgList.map(val=>val.fullurl),i)" :src="src.fullurl"
						mode="aspectFill" class="image">
					</image>
					<view class="icon flex row-center" @click="delImg(i)">
						<u-icon name="close" color="#fff"></u-icon>
					</view>
				</view>
			</template>
			<image @click="uploadImg" v-if="imgList.length < max" src="@/static/uploadicon.png"
				:style="{width:imgSize+'rpx',height:imgSize+'rpx'}" class="ml20"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "myUpload",
		props: {
			imgList: {
				type: Array,
				default: () => []
			},
			imgSize: {
				type: [Number, String],
				default: 200,
			},

			max: {
				default: 9,
				type: Number
			},
		},
		data() {
			return {};
		},

		methods: {
			async uploadImg() {
				let count = this.max - this.imgList.length
				const list = await this.$tools.uploadImage(count)
				this.$emit('success', list)
			},

			delImg(i) {
				this.$emit('delImg', i)
			},
			// 父组件使用 
			// imgSuccess(list) {
			// 	this.imgList.push(...list)
			// 单张
			// 	this.image = this.imgList[0].fullurl
			// 多张
			// this.params.images = this.imgList.map(item => item.fullurl).join(',')
			// },
			// delImg(index) {
			// 	this.imgList.splice(index, 1)
			// 	this.image = ''
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.uploadBox {
		// display: grid;
		// grid-template-columns: repeat(3, 1fr);
		// grid-gap: 20rpx;
		display: flex;
		flex-wrap: wrap;


		.image {
			// width: 200rpx;
			// height: 200rpx;
			border-radius: 10rpx;
			margin-left: 20rpx;
		}

		.upload {
			background: #F8F8F8;
		}

		.imgBox {
			position: relative;

			.icon {
				font-size: 22rpx;
				position: absolute;
				top: 10rpx;
				right: 10rpx;
				width: 40rpx;
				height: 40rpx;
				border-radius: 40rpx;
				background-color: red;
			}

		}
	}
</style>